<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 视口设置，确保在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IT行业招聘数据分析</title>
    <!-- 引入Bootstrap CSS框架 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif; /* 使用微软雅黑字体 */
            background-color: #f0f7ff; /* 极浅蓝背景 */
            color: #333; /* 深灰色文字 */
        }
        .jumbotron {
            padding: 2.5rem; /* 内边距 */
            border-radius: 0.5rem; /* 圆角 */
            margin-bottom: 2.5rem; /* 底部外边距 */
            background-color: #e6f2ff; /* 浅蓝色背景 */
            color: #1a56db; /* 深蓝色文字 */
        }
        .jumbotron h1 {
            margin-bottom: 1rem; /* 标题底部边距 */
            color: #0d47a1; /* 较深的蓝色标题 */
        }
        .jumbotron .lead {
            color: #1976d2; /* 中蓝色副标题 */
        }
        .btn-primary {
            padding: 10px 20px; /* 按钮内边距 */
            font-weight: 600; /* 加粗文字 */
            background-color: #64b5f6; /* 浅蓝色按钮 */
            border-color: #64b5f6; /* 浅蓝色边框 */
            color: #0d47a1; /* 按钮文字颜色 */
        }
        .btn-primary:hover {
            background-color: #42a5f5; /* 稍深的浅蓝色（悬停状态） */
            border-color: #42a5f5;
        }
        .card {
            margin-bottom: 1.5rem; /* 卡片底部外边距 */
            border: 1px solid #bbdefb; /* 浅蓝色边框 */
            border-radius: 10px; /* 卡片圆角 */
            overflow: hidden; /* 内容溢出隐藏 */
            background-color: white; /* 白色卡片背景 */
        }
        .card-body {
            padding: 1.5rem; /* 卡片内容区内边距 */
        }
        .card-title {
            font-size: 1.3rem; /* 标题字体大小 */
            font-weight: 600; /* 标题加粗 */
            margin-bottom: 0.8rem; /* 标题底部边距 */
            padding-bottom: 0.8rem; /* 标题底部内边距 */
            color: #1976d2; /* 中蓝色标题 */
            border-bottom: 1px solid #e3f2fd; /* 极浅蓝分隔线 */
        }
        .card-text {
            font-size: 1rem; /* 文本字体大小 */
            color: #495057; /* 中灰色文本 */
        }
        footer {
            margin-top: 2rem; /* 页脚顶部外边距 */
            padding: 2rem 0; /* 页脚内边距 */
            background-color: #e3f2fd; /* 极浅蓝页脚背景 */
            color: #0d47a1; /* 深蓝色页脚文字 */
        }
        footer small {
            color: #1976d2; /* 中蓝色小字 */
        }
    </style>
</head>
<body>
<!-- 容器，用于响应式布局 -->
<div class="container py-5">
    <!-- 主要信息展示区 -->
    <div class="jumbotron">
        <h1 class="display-4">IT行业招聘数据分析平台</h1>
        <p class="lead">基于大数据分析技术，深入解析IT行业招聘趋势和需求</p>
        <hr class="my-4" style="border-color: rgba(15, 118, 253, 0.2);">
        <p>通过PySpark对大量招聘数据进行处理和分析，为求职者和企业提供有价值的洞察</p>
        <a class="btn btn-primary btn-lg mt-3" href="/dashboard" role="button">
            进入数据分析大屏
        </a>
    </div>

    <!-- 第一行分析功能卡片 -->
    <div class="row">
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">岗位需求分析</h5>
                    <p class="card-text">分析不同IT岗位类别的市场需求量，了解最热门的职业方向</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">地区分布分析</h5>
                    <p class="card-text">展示各地区IT人才需求情况，帮助求职者选择就业城市</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">薪资水平分析</h5>
                    <p class="card-text">对比不同岗位的薪资水平，掌握行业薪资标准</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 第二行分析功能卡片 -->
    <div class="row mt-4">
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">经验要求分析</h5>
                    <p class="card-text">了解企业对工作经验的要求分布，为职业规划提供参考</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">学历要求分析</h5>
                    <p class="card-text">分析企业对学历的要求情况，了解教育背景的重要性</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">技能需求分析</h5>
                    <p class="card-text">发现最受欢迎的IT技能，帮助求职者有针对性地提升自己</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚信息 -->
<footer>
    <div class="container text-center">
        <p>IT行业招聘数据分析平台 &copy; 2023</p>
        <div class="mt-2">
            <small>技术支持：PySpark + Flask + ECharts</small>
        </div>
    </div>
</footer>

<!-- 引入jQuery和Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
